<template>
	<view>
		<view class="item" v-for="(item,index) in page.list" v-bind:key="index" v-on:click="handleItemClick(item)">
			<view class="title">
				<text>{{item.title}}</text>
			</view>
			<view v-if="item.author.length !== 0" class="summary">
				<text>作者: {{item.author}} 时间: {{item.niceDate}}</text>
			</view>
			<view v-if="item.shareUser.length !== 0" class="summary">
				<text>分享人: {{item.shareUser}} 时间: {{item.niceShareDate}}</text>
			</view>
		</view>
		<!-- 加载前值为loadmore，加载中为loading，没有数据为nomore -->
		<!-- 列表已经加载过 并且 列表不为空 展示加载更多 -->
		<u-loadmore v-if="page.init&&!page.empty" :status="page.loadmore" />
	</view>
</template>

<script>
	import wanAndroidApi from "@/core/storage/remote/WanAndroidApi.js"

	export default {
		name: "index-list",
		data() {
			return {
				page: {
					index: 0,
					size: 20,
					list: [],
					nodata: false, //false 还有数据 true 没有更多数据
					//加载前值为loadmore，加载中为loading，没有数据为nomore
					loadmore: "loadmore",
					empty: false, //空数据
					init: false, //列表是否已经加载
				}
			};
		},
		beforeCreate() {
			console.debug("index-list: ", "beforeCreate");
		},
		created() {
			this.log("created");
			this.handldLoadData();
		},
		beforeMount() {
			this.log("beforeMount");
		},
		mounted() {
			this.log("mounted");
		},
		beforeUpdate() {
			this.log("beforeUpdate");
		},
		updated() {
			this.log("updated");
		},
		beforeDestroy() {
			this.log("beforeDestroy");
		},
		destroyed() {
			this.log("destroyed");
		},
		methods: {
			log(content) {
				console.debug("index-list: ", content);
			},
			/**
			 * 处理数据加载
			 */
			handldLoadData() {
				let that = this;
				let url = "article/list/" + that.page.index + "/json";
				wanAndroidApi.get({
					url: url,
					data: {
						"page_size": that.page.size
					}
				}).then(response => {
					let list = response.datas;
					if (that.page.index === 0) {
						that.page.init = true;
						//index = 0 表示加载第一页数据
						that.page.list = [];
						if (list.length === 0) {
							// 空布局
							that.page.empty = true;
						} else {
							//设置第一页数据
							that.page.list = list;
						}
					} else {
						//添加新数据
						that.page.list.push.apply(that.page.list, list);
					}
					//通过分页数 判断数据是否加载完了
					that.page.nodata = that.page.index >= response.pageCount;
					if (that.page.nodata) {
						that.page.loadmore = "loadmore";
					}

				});
			},
			/**
			 * 对外提供 刷新数据
			 */
			refreshData() {
				this.page.index = 0;
				this.handldLoadData();
			},

			/**
			 * 对外提供 加载更多数据
			 */
			loadMore() {
				//列表已经初始化过
				//列表非空
				//列表有下一页数据

				if (this.page.init && !this.page.empty && !this.page.nodata) {
					this.page.index++;
					this.page.loadmore = "loading";
					this.handldLoadData();
				}
			},

			/**
			 * 处理列表点击事件
			 */
			handleItemClick(item) {
				let params = {
					"title": item.title,
					"link": item.link
				}
				uni.navigateTo({
					url: "/pages/index/browser-page?params=" + encodeURIComponent(JSON.stringify(params))
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.item {
		padding: 24rpx;
		border-bottom: 1rpx #F1F1F1 solid;

		.title {
			color: #333333;
			font-size: 30rpx;
			margin-bottom: 8rpx;
		}

		.summary {
			font-size: 24rpx;
			color: #999999;
		}
	}
</style>
